<template>
  <div class="FlightPlan">
    <div class="title">
      <div class="text blue"></div>
      <div class="text"><h1>飞行计划</h1></div>
      <el-button type="text" class="close-btn" icon="el-icon-close" @click="closeFun"></el-button>
    </div>
    <div class="from">
      <div class="from-left">
        <ul>
          <li>飞行单位:{{ flightMess.flightUnit }}</li>
          <li>航空器型号:{{ flightMess.aircraftModel }}</li>
          <li>架次:{{ flightMess.sorting }}</li>
          <li>航空器注册地:{{ flightMess.aircraftRegis }}</li>
          <li>呼号:{{ flightMess.callSign }}</li>
          <li>机长:{{ flightMess.captain }}</li>
          <li>机组人员国籍:{{ flightMess.crewNation }}</li>
          <li>主要登机人员名单:{{ flightMess.checkinList.slice(1, -1) }}</li>
          <li>任务性质:{{ flightMess.taskNature }}</li>
          <li>作业时间:{{ flightMess.operatingTime }}</li>
          <li>起飞机场:{{ flightMess.airport }}</li>
          <li>降落机场:{{ flightMess.airport }}</li>
        </ul>
      </div>
      <div class="from-center">
        <ul>
          <li>预计飞行时间:{{ flightMess.startTime }}</li>
          <li>预计结束时间:{{ flightMess.endTime }}</li>
          <li>机载监视设备类型:{{ flightMess.monitorEquipType }}</li>
          <li>联系人:{{ flightMess.contactPerson }}</li>
          <li>联系方式:{{ flightMess.contactDetails }}</li>
          <li>备注信息:{{ flightMess.remark }}</li>
          <li>
            <img v-for="imgList in imgLists" :key="imgList.id" :class="shrink ? 'small' : 'big'" :src="imgList.img" @click="dialogShow(imgList.id)" />

            <el-dialog :visible.sync="dialogVisible" width="60%" height="50%" :before-close="handleClose">
              <Carousel :imgLists="imgLists" :imgId="imgId"></Carousel>
            </el-dialog>
          </li>
          <li>
            <a href="/data/GEOVIS iCenter V1.1.2 用户手册.pdf" target="_blank" width="100%" height="100%">
              <span style="color:#409EFF;"> 审批文件1.pdf</span>
            </a>
          </li>
        </ul>
      </div>
      <div class="from-right">
        <div class="view">
          <div class="view-title">处理意见:</div>
          <div class="view-box">
            <div>
              <ul>
                <li><input id="inputRed" v-model="flightMess.comments" :disabled="flightMess.apprStatus !== '未审批'" /></li>
                <li>
                  <div class="span-th">
                    <strong>理由: &nbsp;</strong>
                  </div>
                  <div class="input-tr">
                    <textarea id="inputReason" v-model="flightMess.reason" :disabled="flightMess.apprStatus !== '未审批'"></textarea>
                  </div>
                </li>
                <li>
                  <div class="span-th">
                    <strong>建议: &nbsp;</strong>
                  </div>
                  <div class="input-tr">
                    <textarea id="inputView" v-model="flightMess.suggest" :disabled="flightMess.apprStatus !== '未审批'"></textarea>
                  </div>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="btn">
          <el-button type="danger" :disabled="flightMess.apprStatus !== '未审批'" @click="btnFun(2)">驳回</el-button>
          <el-button type="success" :disabled="flightMess.apprStatus !== '未审批'" @click="btnFun(1)">同意</el-button>
          <el-button type="warning" :disabled="flightMess.apprStatus !== '未审批'" @click="btnFun(3)">向上反馈</el-button>
        </div>
      </div>
    </div>
    <div class="img">
      <img :src="statusImg[flightMess.apprStatus]" />
    </div>
  </div>
</template>
<script>
import { flightPlainPut } from '../../api/planHome'
import Carousel from '../../components/Carousel'
import { mapState, mapActions } from 'vuex'
export default {
  components: { Carousel },
  data() {
    return {
      dialogVisible: false,
      shrink: true,
      inputRed: '驳回此项飞行计划',
      inputReason: '22222222222222222',
      inputView: '22222222222222222dddssssss',
      statusImg: {
        未审批: '',
        向上反馈: require('../../assets/flightPlan/向上反馈.png'),
        驳回: require('../../assets/flightPlan/驳回.png'),
        已同意: require('../../assets/flightPlan/同意.png')
      },
      imgId: 0,
      imgLists: [
        {
          id: 0,
          img: require('../../assets/flightPlan/FY4A-_AGRI--_N_REGI_1047E_L1C_MTCC_MULT_GLL_2020-04-07 22_38 (UTC)(UTC).png')
        },
        {
          id: 1,
          img: require('../../assets/flightPlan/FY4A-_AGRI--_N_REGI_1047E_L1C_MTCC_MULT_GLL_2020-04-07 22_38 (UTC)(UTC).png')
        }
      ],
      ruleForm: {
        flightUnit: '山东',
        aircraftModel: '',
        sorting: '',
        aircraftRegis: '',
        callSign: '',
        captain: '',
        crewNation: '',
        checkinList: '',
        operatingTime: '',
        airport: '',
        startTime: '',
        endTime: '',
        monitorEquipType: '',
        contactPerson: '',
        contactDetails: '',
        remark: '',
        comments: ''
      },
      rules: {
        flightUnit: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ],
        aircraftModel: [{ required: true, message: '请选择活动区域', trigger: 'blur' }],
        sorting: [{ type: 'date', required: true, message: '请选择日期', trigger: 'blur' }],
        aircraftRegis: [{ type: 'date', required: true, message: '请选择时间', trigger: 'change' }],
        callSign: [{ type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }],
        captain: [{ required: true, message: '请选择活动资源', trigger: 'change' }],
        crewNation: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        checkinList: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        operatingTime: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        airport: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        startTime: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        endTime: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        monitorEquipType: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        contactPerson: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        contactDetails: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        remark: [{ required: true, message: '请填写活动形式', trigger: 'blur' }],
        comments: [{ required: true, message: '请填写活动形式', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState('app', ['flightMess'])
  },
  methods: {
    ...mapActions('app', ['setFlightShowFun']),
    closeFun() {
      this.setFlightShowFun(false)
    },
    dialogShow(val) {
      this.imgId = val
      this.dialogVisible = true
    },
    handleClose() {
      this.dialogVisible = false
    },
    async btnFun(val) {
      this.id = this.flightMess.id
      const res = await flightPlainPut(this.id, val)
      if (res.status === 200) {
        this.$message({
          message: '请求发送成功',
          type: 'success'
        })
        this.setFlightShowFun(false)
      } else {
        this.$message.error('请求发送失败')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.FlightPlan {
  //   margin: 0 14px;
  padding: 0 14px;
  height: 450px;
  border: 1px solid rgba(8, 75, 108, 1);
  border-radius: 4px;
  .title {
    height: 70px;
    line-height: 70px;
    .close-btn {
      float: right;
      font-size: 20px;
    }
    .text {
      float: left;
    }
    .blue {
      width: 6px;
      height: 38px;
      border-radius: 20%;
      background: #62adf8;
      margin-top: 16px;
      margin-right: 4px;
    }
  }
  .from {
    display: -webkit-flex;
    display: flex;
    flex-wrap: nowrap;
    -webkit-flex-wrap: nowrap;
    .from-left {
      width: 25%;
    }
    .from-center {
      width: 35%;
      .small {
        width: 90px;
        height: 60px;
        margin-left: 4px;
        cursor: pointer;
      }
      .big {
      }
      .pdf {
        color: #62adf8;
        cursor: pointer;
      }
    }
    .from-right {
      width: 35%;
      .btn {
        margin-left: 438px;
        margin-top: 40px;
      }
      .view {
        display: -webkit-flex;
        display: flex;
        .view-title {
          width: 80px;
          margin-top: 14px;
        }
        .view-box {
          width: 550px;
          height: 230px;
          border: 1px solid #e0e0e0;
          padding: 8px 14px;
          border-radius: 4px;
          .span-th {
            display: inline-block;
            margin-top: 2px;
            float: left;
          }
          .input-tr {
            margin-left: 40px;
          }
          #inputRed {
            color: rgb(255, 0, 0);
            font-weight: 600;
            width: 550px;
          }
          textarea {
            width: 510px;
            color: #fff;
          }
        }
      }
    }
    ul {
      li {
        line-height: 28px;
        font-size: 16px;
      }
    }
  }
  .img {
    position: relative;
    top: -270px;
    left: 760px;
    width: 124px;
    height: 124px;
  }
}
</style>
